{include file="public/header"/}
<div class="layui-container">
    <div class="layui-row" id="exam-log">
        
    </div>
</div>
<script type="text/javascript">
    layui.use(['flow','layer','form'], function(){
        var layer = layui.layer, flow = layui.flow, form = layui.form, $=layui.jquery;
        
        var product_id = "{$product_id}";
        $(function(){
            loadList(product_id);  // 加载列表
        })

        // 分页加载列表
        function loadList(product_id){
            var limit = 10;//每次请求的条数
            flow.load({
                elem: '#exam-log' //指定列表容器
                ,scrollElem: ''//滚动条所在元素
                ,end: '—— 已经到底了~ ——'
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页的回调
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        data: {'page': page, 'limit':limit, 'product_id':product_id, 'is_my':1},//请求的页码和每页显示条数
                        url: '/exam/get_exam_log',
                        success: function (res) {
                            var lis = [];
                            if(res.code == 0){
                                if (res.data.length > 0) {
                                    
                                    var newsHtml = '';
                                    layui.each(res.data, function(index, item){
                                        var score = `<b>${item.score} 分</b>`;
                                        if (item.score == '-1') {
                                            score = item.extra
                                        }
                                        newsHtml += `<div class="layui-card margin-bottom-10">
                                                        <div class="layui-card-header font-weight-bold">交卷时间：${item.sub_time}</div>
                                                        <div class="layui-card-body">
                                                            <p class="layui-font-15 margin-bottom-5">${item.product_name}</p>
                                                            <div class="space-between">
                                                                <p>
                                                                    <span class="text">用时：</span>
                                                                    <span class="letter-spacing-1">${item.show_time}</span>                         
                                                                </p>
                                                                <p>
                                                                    <span class="text">分数：</span>
                                                                    <span class="layui-font-red">${score}</span>                             
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>`;
                                    });
                                    
                                    lis.push(newsHtml);
                                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                    //res.total为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                    next(lis.join(''), page < Math.ceil(res.count/limit));
                                    
                                } else {
                                    $('#exam-log').html('<div class="layui-empty"><img src="/static/images/nodata/no_exam.png"><p>暂无考试记录~</p></div>');
                                }
                            } else {
                                layer.msg(res.msg, {icon:2, time: 1500});
                            }
                        }
                        ,error:function(e){
                            layer.closeAll();
                            layer.msg("请求失败："+e.msg, {icon:2, time: 1500});
                        },
                    });
                }
            });
        }
    });

</script>